<template>
    <div class="li-rate-box">
        <!-- <el-rate v-model="initScore" class="li_rate" :allow-half="allowHalf"></el-rate> -->
        <div v-for="(item, index) in 5" :key="index" class="li-star" :class="getClass(index)"></div>
    </div>
</template>
<script>
import { Rate } from 'element-ui';
export default {
    name: "LiRate",
    components: {
        [Rate.name]: Rate
    },
    props: {
        value: {
            type: [String, Number],
            default: 0
        },
        disabled: {
            type: Boolean,
            default: false
        },
        allowHalf: {
            type: Boolean,
            default: false
        }
    },
    watch: {
        value: {
            handler: function (n) {
                this.initScore = Number(n)
            },
            immediate: true
        }
    },
    data() {
        return {
            initScore: 0
        }
    },
    methods: {
        // 
        getClass(index) {
            let num = this.initScore;
            let m = num - index;
            let _name = ''

            if (m > 0 && m < 1) {
                _name = 'li-rate-half'
            }
            if (m >= 1) {
                _name = 'li-rate-on'
            }
            if (m < 0) {
                _name = ''
            }
            return _name
        }
    }
}
</script>
<style lang="less" scoped>
@import './index.less';
</style>